<template>
  <ul class="prolistV">
    <li class="proitemV" v-for="item of typeProList" :key="item.proid" @click="toDetail(item.proid)">
      <img :src="item.proimg" alt="00">
      <span class="itemnameV">{{item.proname}}</span>
      <span class="iteminfoV">{{item.desc}}</span>
      <p><span class="rmbV">￥</span><span class="itempriceV">{{item.price}}</span><span class="oldPriceV">￥{{item.oldprice}}</span></p>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    typeProList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    toDetail (proid) {
      console.log(proid)
      // this.$router.push('/detail/' + proid)
      // this.$router.push({ name: 'detail', params: { proid } })
      this.$router.push({ path: '/detail/' + proid })
    }
  }
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';
.prolistV {
  @include rect(100%, 100%);
  .proitemV {
    border-radius: 8px;
    width:100%;
    height:120px;
    background:white;
    margin:8px 0;
    img {
      width:100px;
      border-radius: 8px;
      margin:10px;
      vertical-align: top;
      float: left;
    }
    .itemnameV {
      width:130px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      height:23px;
      display: inline-block;
      font-size: 1em;
      color:black;
      margin-top: 0.2rem;
      // @include ellipsis(100%, 1);
    }
    .iteminfoV {
      display: block;
      height:18px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color:#999;
      font-size: 0.5em;
      width:130px;
      float: left;
    }
    p {
      height:27px;
      margin-top: 30px;
      .rmbV {
        font-size: 0.5em;
        color:red;
      }
      .itempriceV {
        color:red;
        font-size: 1.5em;
      }
      .oldPriceV {
        text-decoration: line-through;
        color:#999;
        font-size: 0.3em;
        margin-left: 8px;
      }
    }
  }
}
</style>
